import React, { Component } from 'react';
import {Clearfix,Table,MenuItem} from 'react-bootstrap';

import '../css/menuitems.css';

export default class MenuItems extends Component {
    constructor(props) {
        super(props);
        this.state={
            isLoading: false
        };
        // this.handleClick=this.handleClick().bind(this);
    }

    onSelectAlert=(eventKey) =>{
        alert(`Alert from menu item.\neventKey: ${eventKey}`);
    }

    handleClick=(e)=> {
        this.setState({isLoading: true});
        //this.state.isLoading=true;
        // This probably where you would have an `ajax` call
        setTimeout(() => {
            // Completed of async action, set loading state back
            this.setState({isLoading: false});
            // this.state.isLoading=false;
        }, 2000);
    }

    render(){
        const wellStyles = {maxWidth: 800, margin: '0 10px 10px'};
        const BUTTONS = ['Default', 'Primary', 'Success', 'Info', 'Warning', 'Danger', 'Link'];
        let isLoading = this.state.isLoading;
        return (
            <div id="menuitems">
                <div className="well" style={wellStyles}>

                        <Clearfix>
                        <ul className="dropdown-menu open">
                            <MenuItem header>Header</MenuItem>
                            <MenuItem>link</MenuItem>
                            <MenuItem divider/>
                            <MenuItem header>Header</MenuItem>
                            <MenuItem>link</MenuItem>
                            <MenuItem disabled>disabled</MenuItem>
                            <MenuItem title="See? I have a title.">
                                link with title
                            </MenuItem>
                            <MenuItem eventKey={1} href="#someHref" onSelect={this.onSelectAlert}>
                                link that alerts
                            </MenuItem>
                        </ul>
                        </Clearfix>

                    <h2>Props</h2>
                    <Table class="prop-table table table-striped table-bordered" data-reactid="1636">
                        <thead data-reactid="1637">
                        <tr data-reactid="1638">
                            <th data-reactid="1639">
                                Name
                            </th>
                            <th data-reactid="1640">
                                Type
                            </th>
                            <th data-reactid="1641">
                                Default
                            </th>
                            <th data-reactid="1642">
                                Description
                            </th>
                        </tr>
                        </thead>
                        <tbody data-reactid="1643">
                        <tr class="prop-table-row" data-reactid="1644">
                            <td data-reactid="1645">
                                active
                            </td>
                            <td data-reactid="1648">
                                <div data-reactid="1649">
                                    boolean
                                </div>
                            </td>
                            <td data-reactid="1650"></td>
                            <td data-reactid="1651">
                                <div class="prop-desc" data-reactid="1652">
                                    <p>
                                        Highlight the menu item as active.
                                    </p>
                                </div>
                            </td>
                        </tr>
                        <tr class="prop-table-row" data-reactid="1653">
                            <td data-reactid="1654">
                                bsClass
                            </td>
                            <td data-reactid="1657">
                                <div data-reactid="1658">
                                    string
                                </div>
                            </td>
                            <td data-reactid="1659">
                                'dropdown'
                            </td>
                            <td data-reactid="1660">
                                <div class="prop-desc" data-reactid="1661">
                                    <p>
                                        Base CSS class and prefix for the component. Generally one should only change <code>bsClass</code> to provide new, non-Bootstrap, CSS styles for a component.
                                    </p>
                                </div>
                            </td>
                        </tr>
                        <tr class="prop-table-row" data-reactid="1662">
                            <td data-reactid="1663">
                                disabled
                            </td>
                            <td data-reactid="1666">
                                <div data-reactid="1667">
                                    boolean
                                </div>
                            </td>
                            <td data-reactid="1668">
                                false
                            </td>
                            <td data-reactid="1669">
                                <div class="prop-desc" data-reactid="1670">
                                    <p>
                                        Disable the menu item, making it unselectable.
                                    </p>
                                </div>
                            </td>
                        </tr>
                        <tr class="prop-table-row" data-reactid="1671">
                            <td data-reactid="1672">
                                divider
                            </td>
                            <td data-reactid="1675">
                                <div data-reactid="1676">
                                    all
                                </div>
                            </td>
                            <td data-reactid="1677">
                                false
                            </td>
                            <td data-reactid="1678">
                                <div class="prop-desc" data-reactid="1679">
                                    <p>
                                        Styles the menu item as a horizontal rule, providing visual separation between groups of menu items.
                                    </p>
                                </div>
                            </td>
                        </tr>
                        <tr class="prop-table-row" data-reactid="1680">
                            <td data-reactid="1681">
                                eventKey
                            </td>
                            <td data-reactid="1684">
                                <div data-reactid="1685">
                                    any
                                </div>
                            </td>
                            <td data-reactid="1686"></td>
                            <td data-reactid="1687">
                                <div class="prop-desc" data-reactid="1688">
                                    <p>
                                        Value passed to the <code>onSelect</code> handler, useful for identifying the selected menu item.
                                    </p>
                                </div>
                            </td>
                        </tr>
                        <tr class="prop-table-row" data-reactid="1689">
                            <td data-reactid="1690">
                                header
                            </td>
                            <td data-reactid="1693">
                                <div data-reactid="1694">
                                    boolean
                                </div>
                            </td>
                            <td data-reactid="1695">
                                false
                            </td>
                            <td data-reactid="1696">
                                <div class="prop-desc" data-reactid="1697">
                                    <p>
                                        Styles the menu item as a header label, useful for describing a group of menu items.
                                    </p>
                                </div>
                            </td>
                        </tr>
                        <tr class="prop-table-row" data-reactid="1698">
                            <td data-reactid="1699">
                                href
                            </td>
                            <td data-reactid="1702">
                                <div data-reactid="1703">
                                    string
                                </div>
                            </td>
                            <td data-reactid="1704"></td>
                            <td data-reactid="1705">
                                <div class="prop-desc" data-reactid="1706">
                                    <p>
                                        HTML <code>href</code> attribute corresponding to <code>a.href</code>.
                                    </p>
                                </div>
                            </td>
                        </tr>
                        <tr class="prop-table-row" data-reactid="1707">
                            <td data-reactid="1708">
                                onClick
                            </td>
                            <td data-reactid="1711">
                                <div data-reactid="1712">
                                    function
                                </div>
                            </td>
                            <td data-reactid="1713"></td>
                            <td data-reactid="1714">
                                <div class="prop-desc" data-reactid="1715">
                                    <p>
                                        Callback fired when the menu item is clicked.
                                    </p>
                                </div>
                            </td>
                        </tr>
                        <tr class="prop-table-row" data-reactid="1716">
                            <td data-reactid="1717">
                                onSelect
                            </td>
                            <td data-reactid="1720">
                                <div data-reactid="1721">
                                    function
                                </div>
                            </td>
                            <td data-reactid="1722"></td>
                            <td data-reactid="1723">
                                <div class="prop-desc" data-reactid="1724">
                                    <p>
                                        Callback fired when the menu item is selected.
                                    </p>
                                    <pre>
<code class="lang-js">(eventKey: any, event: Object) =&gt; any
</code>
</pre>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </Table>

                </div>
            </div>
        )
    }
}